@import '../../../../styles/tools/utils';

.page-home {
  padding-top: 20px * $ratio;
  @media screen and (min-width: $site-width_min) {
    .search-wrapper {
      display: block;
      border: 1px solid #e6e6e6;
      border-bottom: none;
      border-radius: 8px * $ratio 8px * $ratio 0 0;
      box-sizing: border-box;
      height: 100px * $ratio;
      line-height: 100px * $ratio;
      font-size: 0;
      padding: 0 58px * $ratio;
      .btn-search {
        @include verticalAlign();
        width: 44px * $ratio;
        height: 43px * $ratio;
      }
      .field-search {
        @include verticalAlign();
        font-size: 30px * $ratio;
        color: darken(#b2b1b1, 20%);
        height: 60px * $ratio;
        line-height: normal;
        width: 600px * $ratio;
        box-sizing: border-box;
        padding: 0 36px * $ratio;
        letter-spacing: 1px;
        background-color: transparent;
        &::-webkit-input-placeholder {
          color: #b2b1b1;
        }
        &::-moz-placeholder {
          color: #b2b1b1;
        }
        &:-moz-placeholder {
          color: #b2b1b1;
        }
        &:-ms-input-placeholder {
          color: #b2b1b1;
        }
        &::placeholder {
          color: #b2b1b1;
        }
      }
    }
  }

  @media screen and (max-width: $site-width_min - 1px) {
    $ratio: $radioForMobile;
    .search-wrapper {
      display: block;
      border: 1px solid #e6e6e6;
      border-bottom: none;
      border-radius: 8px * $ratio 8px * $ratio 0 0;
      box-sizing: border-box;
      height: 100px * $ratio;
      line-height: 100px * $ratio;
      font-size: 0;
      padding: 0 58px * $ratio;
      .btn-search {
        @include verticalAlign();
        width: 44px * $ratio;
        height: 43px * $ratio;
      }
      .field-search {
        @include verticalAlign();
        @include fontSize(30px * $ratio);
        color: darken(#b2b1b1, 20%);
        height: 60px * $ratio;
        line-height: normal;
        width: 600px * $ratio;
        box-sizing: border-box;
        padding: 0 36px * $ratio;
        letter-spacing: 1px;
        background-color: transparent;
        &::-webkit-input-placeholder {
          color: #b2b1b1;
        }
        &::-moz-placeholder {
          color: #b2b1b1;
        }
        &:-moz-placeholder {
          color: #b2b1b1;
        }
        &:-ms-input-placeholder {
          color: #b2b1b1;
        }
        &::placeholder {
          color: #b2b1b1;
        }
      }
    }
  }

  .banner-wrapper {
    display: block;
    border-bottom: 1px solid #e6e6e6;
    border-radius: 0 0 8px * $ratio 8px * $ratio;
    overflow: hidden;
    .img-banner {
      display: block;
      width: 100%;
      height: auto;
    }
  }

  @media screen and (min-width: $site-width_min) {
    .products-wrapper {
      margin-top: 40px * $ratio;
      .tabs {
        display: block;
        border-bottom: 2px * $ratio solid #e6e6e6;
        .tab {
          @include verticalAlign();
          @include cursor();
          height: 110px * $ratio;
          line-height: 110px * $ratio;
          border-bottom: 4px * $ratio solid transparent;
          font-size: 30px * $ratio;
          color: #484848;
          transition: 150ms all linear 0ms;
          &:nth-of-type(n+2) {
            margin-left: 40px * $ratio;
          }
          &:hover {
            color: #23abf2;
            border-bottom-color: #23abf2;
          }
        }
        .active {
          color: #23abf2;
          border-bottom-color: #23abf2;
        }
      }

      .products {
        display: none;
        font-size: 0;
        line-height: 1;
        .item {
          @include verticalAlign(top);
          position: relative;
          margin-top: 40px * $ratio;
          border: 1px solid #e6e6e6;
          box-sizing: border-box;
          background: transparent scroll no-repeat center center;
          background-size: auto 80%;
          border-radius: 8px * $ratio;
          $width: percentage((2064px - 30px * 2) / 3 / 2064px);
          width: $width;
          height: 0;
          padding-top: $width * 444 / 667;
          margin-left: percentage(30px / 2064px);
          &:nth-of-type(3n+1) {
            margin-left: 0;
          }
        }
        .item-header {
          position: absolute;
          z-index: 1;
          top: 0;
          left: 0;
          height: 56px * $ratio;
          line-height: 56px * $ratio;
          border-radius: 0 28px * $ratio 28px * $ratio 0;
          background-color: #fd9a25;
          font-size: 32px * $ratio;
          color: #ffffff;
          padding: 0 22px * $ratio;
        }
      }
    }
  }

  @media screen and (max-width: $site-width_min - 1px) {
    $ratio: $radioForMobile;
    .products-wrapper {
      margin-top: 40px * $ratio;
      .tabs {
        display: block;
        border-bottom: 2px * $ratio solid #e6e6e6;
        .tab {
          @include verticalAlign();
          @include cursor();
          @include fontSize(30px * $ratio);
          height: 110px * $ratio;
          line-height: 110px * $ratio;
          border-bottom: 4px * $ratio solid transparent;
          color: #484848;
          transition: 150ms all linear 0ms;
          &:nth-of-type(n+2) {
            margin-left: 40px * $ratio;
          }
          &:hover {
            color: #23abf2;
            border-bottom-color: #23abf2;
          }
        }
        .active {
          color: #23abf2;
          border-bottom-color: #23abf2;
        }
      }

      .products {
        display: none;
        font-size: 0;
        line-height: 1;
        .item {
          @include verticalAlign(top);
          position: relative;
          margin-top: 40px * $ratio;
          border: 1px solid #e6e6e6;
          box-sizing: border-box;
          background: transparent scroll no-repeat center center;
          background-size: auto 80%;
          border-radius: 8px * $ratio;
          $width: percentage((2064px - 30px) / 2 / 2064px);
          width: $width;
          height: 0;
          padding-top: $width * 444 / 667;
          margin-left: percentage(30px / 2064px);
          &:nth-of-type(2n+1) {
            margin-left: 0;
          }
        }
        .item-header {
          position: absolute;
          z-index: 1;
          top: 0;
          left: 0;
          height: 56px * $ratio;
          line-height: 56px * $ratio;
          border-radius: 0 28px * $ratio 28px * $ratio 0;
          background-color: #fd9a25;
          font-size: 32px * $ratio;
          color: #ffffff;
          padding: 0 22px * $ratio;
        }
      }
    }
  }

  @media screen and (min-width: $site-width_min) {
    .contact-wrapper {
      margin-top: 30px * $ratio;
      background-color: #484848;
      border-radius: 8px * $ratio;
      padding: 30px * $ratio 40px * $ratio 54px * $ratio;
      font-size: 0;
      line-height: 1.5;
      .contact-header {
        font-size: 30px * $ratio;
        color: #ffffff;
        font-weight: bold;
      }
      .item {
        &:nth-of-type(n+1) {
          margin-top: 10px * $ratio;
        }
      }
      .item-title {
        font-size: 30px * $ratio;
        color: #ffffff;
        font-weight: bold;
      }
      .item-detail {
        font-size: 30px * $ratio;
        color: #dbdbdb;
      }
    }
  }

  @media screen and (max-width: $site-width_min - 1px) {
    $ratio: $radioForMobile;
    .contact-wrapper {
      margin-top: 30px * $ratio;
      background-color: #484848;
      border-radius: 8px * $ratio;
      padding: 30px * $ratio 40px * $ratio 54px * $ratio;
      font-size: 0;
      line-height: 1.5;
      .contact-header {
        @include fontSize(30px * $ratio);
        color: #ffffff;
        font-weight: bold;
      }
      .item {
        &:nth-of-type(n+1) {
          margin-top: 10px * $ratio;
        }
      }
      .item-title {
        @include fontSize(30px * $ratio);
        color: #ffffff;
        font-weight: bold;
      }
      .item-detail {
        @include fontSize(30px * $ratio);
        color: #dbdbdb;
      }
    }
  }
}
